<template>
  <n-card title="个人信息" w-100 m-auto embedded>
    <n-form :model="formData" :rules="rules">
      <n-form-item label="用户名">
        <n-input :value="userStore.userInfo?.name" disabled />
      </n-form-item>
      <n-form-item label="密码">
        <n-input v-model:value="formData.password" />
      </n-form-item>
      <n-form-item label="确认密码">
        <n-input v-model:value="formData.confirmPassword" />
      </n-form-item>
    </n-form>
  </n-card>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { NCard, NForm, NFormItem, NInput } from "naive-ui";
import { useUserStore } from "@/stores/user";

const userStore = useUserStore();
const formData = ref({
  name: "",
  password: "",
  confirmPassword: "",
});

const rules = {
  name: {
    required: true,
    message: "请输入用户名",
  },
  password: {
    required: true,
    message: "请输入密码",
  },
  confirmPassword: {
    required: true,
    message: "请输入确认密码",
  },
};
</script>
